<template>
  <div>
    <!-- 外层容器 -->
    <el-container>
      <!-- 上半区域：顶栏 -->
      <el-header class="layout-header">
        <!-- 顶栏右侧的当前用户信息及下拉菜单 -->
        <div class="login-user">
          <span class="welcome">欢迎回来，<b>{{ currentUser.username }}</b>！</span>
          <el-dropdown @command="handleCommand">
            <el-avatar shape="square" size="medium" :src="currentUser.avatar"></el-avatar>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-document" command="openEditInfoDialog">修改资料</el-dropdown-item>
              <el-dropdown-item icon="el-icon-coordinate" command="openEditAvatarDialog">修改头像</el-dropdown-item>
              <el-dropdown-item icon="el-icon-lock" command="openEditPasswordDialog">修改密码</el-dropdown-item>
              <el-dropdown-item icon="el-icon-right" divided command="openLogoutConfirm">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <!-- 顶栏的标题文字 -->
        <h1>知友圈运营管理平台</h1>
      </el-header>
      <!-- 下半区域 -->
      <el-container class="layout-body">
        <!-- 下半区域的左侧边栏 -->
        <el-aside class="layout-aside">
          <el-menu
              router
              :default-active="activeMenuItemPath"
              class="el-menu-vertical-demo"
              background-color="#3a4856"
              text-color="#fff"
              active-text-color="#fff">
            <!-- 主页 -->
            <el-menu-item index="/">
              <i class="el-icon-s-home"></i>
              <span>主页</span>
            </el-menu-item>
            <!-- 账号管理 -->
            <el-sub-menu index="2" v-if="currentUser.permission.includes('/account/user/query')">
              <template slot="title">
                <i class="el-icon-s-check"></i>
                <span>账号管理</span>
              </template>
              <el-menu-item index="/admin/account/user">
                <i class="el-icon-user-solid"></i>
                <span slot="title">用户管理</span>
              </el-menu-item>
              <el-menu-item index="/admin/account/login-log">
                <i class="el-icon-s-operation"></i>
                <span slot="title">登录日志</span>
              </el-menu-item>
            </el-sub-menu>
            <!-- 内容管理 -->
            <el-sub-menu index="3">
              <template #title>
                <el-icon><Tickets /></el-icon>
                <span>内容管理</span>
              </template>
              <el-menu-item index="/admin/content/category">
                <i class="el-icon-s-grid"></i>
                <span slot="title">类别管理</span>
              </el-menu-item>
              <el-menu-item index="/admin/content/article">
                <i class="el-icon-s-order"></i>
                <span slot="title">文章管理</span>
              </el-menu-item>
              <el-menu-item index="/admin/content/check-log/article">
                <i class="el-icon-s-operation"></i>
                <span slot="title">文章审核日志</span>
              </el-menu-item>
              <el-menu-item index="/admin/content/comment">
                <i class="el-icon-s-comment"></i>
                <span slot="title">评论管理</span>
              </el-menu-item>
              <el-menu-item index="/admin/content/check-log/comment">
                <i class="el-icon-s-operation"></i>
                <span slot="title">评论审核日志</span>
              </el-menu-item>
            </el-sub-menu>
            <!-- 商城管理 -->
            <el-sub-menu index="4">
              <template #title>
                <el-icon><ShoppingCart /></el-icon>
                <span>商城管理</span>
              </template>
              <el-menu-item index="/admin/mall/category">
                <i class="el-icon-s-grid"></i>
                <span slot="title">类别管理</span>
              </el-menu-item>
              <el-menu-item index="/admin/mall/goods">
                <i class="el-icon-s-goods"></i>
                <span slot="title">商品管理</span>
              </el-menu-item>
              <el-menu-item index="/admin/mall/check-log/goods">
                <i class="el-icon-s-operation"></i>
                <span slot="title">商品审核日志</span>
              </el-menu-item>
              <el-menu-item index="/admin/mall/comment">
                <i class="el-icon-s-comment"></i>
                <span slot="title">评论管理</span>
              </el-menu-item>
              <el-menu-item index="/admin/mall/check-log/comment">
                <i class="el-icon-s-operation"></i>
                <span slot="title">评论审核日志</span>
              </el-menu-item>
            </el-sub-menu>
            <!-- 其它 -->
            <el-sub-menu index="5">
              <template #title>
                <el-icon><Promotion /></el-icon>
                <span>其它</span>
              </template>
              <el-menu-item index="/admin/other/echarts-demo">
                <i class="el-icon-s-marketing"></i>
                <span slot="title">ECharts演示</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <!-- 下半区域的右侧主体 -->
        <el-main class="layout-main">
          <!-- 将由其它视图组件来负责此处的显示 -->
          <div class="body">
            <router-view/>
          </div>
          <!-- 版权信息 -->
          <div class="copyright">
            <p>Copyright &copy; 达内时代科技集团 - IT学院 - Java教学研发部</p>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
body {
  margin: 0;
}

.layout-header {
  background: #28292e;
}

.layout-header .login-user {
  float: right;
  margin-top: 12px;
  display: flex;
}

.layout-header .login-user .welcome {
  line-height: 36px;
  color: #fff;
  margin-right: 10px;
}

.layout-header h1 {
  margin: 0;
  color: #fff;
  line-height: 60px;
  font-size: 20px;
}

.layout-body {
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
}

.layout-aside {
  background: #3a4856;
}

.layout-aside .el-menu {
  border: 0;
}

.layout-aside i {
  color: #fff !important;
}

.layout-main {
  background: #f2f4f9;
}

.layout-main .body {
  background: #fff;
  padding: 30px 30px 10px 30px;
}

.layout-main .copyright {
  width: 600px;
  margin: 0 auto;
  padding: 10px;
}

.layout-main .copyright p {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 12px;
  color: #9e9e9f;
}

.el-menu-item.is-active {
  background: #405872 !important;
}
</style>

<script setup>
import {ElMessageBox, ElMessage} from 'element-plus';
import {onMounted} from "vue";

const currentUser = ref({
  username: '',
  avatar: '',
  permission: []
})
const activeMenuItemPath = ref()
const handleCommand = (command) => {
  if (command == 'openEditInfoDialog') {
    openEditInfoDialog();
  } else if (command == 'openEditAvatarDialog') {
    openEditAvatarDialog();
  } else if (command == 'openEditPasswordDialog') {
    openEditPasswordDialog();
  } else if (command == 'openLogoutConfirm') {
    openLogoutConfirm();
  }
}

// 打开编辑对话框【未实现】
const openEditInfoDialog = () => {
  let title = '提示';
  let message = '您正在尝试修改当前登录的【' + currentUser.value.username + '】的【基本资料】，抱歉，此功能尚未实现……';
  ElMessageBox.alert(message, title, {
    confirmButtonText: '确定',
  }).then(() => {
    // 回调函数，用户点击确定后执行的操作
  });
}
// 打开修改头像对话框【未实现】
const openEditAvatarDialog = () => {
  let title = '提示';
  let message = '您正在尝试修改当前登录的【' + currentUser.value.username + '】的【头像】，抱歉，此功能尚未实现……';
  ElMessageBox.alert(message, title, {
    confirmButtonText: '确定',
  }).then(() => {
    // 回调函数，用户点击确定后执行的操作
  });
}
// 打开修改密码对话框【未实现】
const openEditPasswordDialog = () => {
  let title = '提示';
  let message = '您正在尝试修改当前登录的【' + currentUser.value.username + '】的【密码】，抱歉，此功能尚未实现……';
  ElMessageBox.alert(message, title, {
    confirmButtonText: '确定',
  }).then(() => {
    // 回调函数，用户点击确定后执行的操作
  });
}

// 打开登出确认框
const openLogoutConfirm = () => {
  let message = '即将退出登录，是否继续？';
  ElMessageBox.confirm(message, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 回调函数，用户点击确定后执行的操作
    this.handleLogout();
  }).catch(() => {
  });
}
// 处理登出
const handleLogout = () => {
  let url = BASE_URL.PASSPORT + '/passport/logOut';
  console.log('url = ' + url);

  this.TokenAxios.post(url).then((response) => {
    if (response.data.state == 200) {
      ElMessage.success('退出登录成功！');
      localStorage.removeItem('userInfo');
      router.push('/login');
    } else {
      ElMessageBox.alert(jsonResult.message, '错误', {
        confirmButtonText: '确定',
      }).then(() => {
      });
    }
  }).catch(error => {
    let title = '错误';
    let message = '程序执行过程中出现错误，请打开浏览器的控制台查看详细错误信息！';
    ElMessageBox.alert(message, title, {
      confirmButtonText: '确定',
    }).then(() => {
    });
    console.log(error);
  });
}
// 加载当前登录的用户信息
const loadCurrentLoginInfo = () => {
  let userInfo = localStorage.getItem('userInfo');
  if (!userInfo) {
    router.push('/login');
    return;
  }
  currentUser.value = JSON.parse(userInfo);
}
// 处理激活某个菜单项
const handleActiveMenuItem = () => {
  let path = router.currentRoute.value.path;
  if (path.startsWith('/admin/index')) {
    path = '/';
  }
  if (path.startsWith('/admin/account/user')) {
    path = '/admin/account/user';
  }
  if (path.startsWith('/admin/content/category')) {
    path = '/admin/content/category';
  }
  if (path.startsWith('/admin/content/article')) {
    path = '/admin/content/article';
  }
  if (path.startsWith('/admin/content/comment')) {
    path = '/admin/content/comment';
  }
  if (path.startsWith('/admin/mall/category')) {
    path = '/admin/mall/category';
  }
  if (path.startsWith('/admin/mall/goods')) {
    path = '/admin/mall/goods';
  }
  if (path.startsWith('/admin/mall/comment')) {
    path = '/admin/mall/comment';
  }
  activeMenuItemPath.value = path;
}

onMounted(() => {
  handleActiveMenuItem();
  loadCurrentLoginInfo();
})

</script>